<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-JQuery其他选择器</title>
    <script src="../js/jquery-3.6.0.js"></script>
    <script>
        $(function () {
            // 设置所有元素隐藏
            $("button.btn1").click(function () {
                $("*").hide();
            });
            // 设置当前被点击元素背景为绿色
            $("button[name=btn2]").click(function () {
                $(this).css(
                    {
                        backgroundColor:"green"
                    }
                );
            });
            // 隐藏第一个和最后一个p标签元素
            $("#btn3").click(function () {
                $("p:first,p:last").hide();
            });
            // 隐藏所有被选中的input标签元素
            $("#btn4").click(function () {
                $("input:checked").hide();
            });
            // 隐藏奇数位input标签
            $("#btn5").click(function () {
                $("input:odd").hide();
            });
        });
    </script>
</head>
<body>
<p id="p1">段落1</p>
<p class="test">段落2</p>
<p class="test">段落3</p>
<p class="test">段落4</p>
<p value="12">段落5</p>
<hr>
<input type="checkbox" name="hobby"> 唱歌
<input type="checkbox" name="hobby"> 跳舞
<input type="checkbox" name="hobby"> rap
<input type="checkbox" name="hobby"> 篮球
<hr>
<select name="book" id="sel">
    <option value="0">Java</option>
    <option value="1" selected>C++</option>
    <option value="2">Python</option>
    <option value="3">Html</option>
</select>
<hr>
<input type="checkbox" name="address"> 武汉
<input type="checkbox" name="address"> 北京 <br>
<button class="btn1">设置所有元素隐藏</button>
<button name="btn2">设置当前被点击元素背景为绿色</button>
<button id="btn3">点我隐藏第一个和最后一个p标签元素</button>
<button id="btn4">点我隐藏所有被选中的input标签元素</button>
<button id="btn5">点我隐藏奇数位input标签</button>
</body>
</html>